<template>
  <div class="map">
    <mt-header title="联系资料" fixed>
      <router-link to="/" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>
    <mt-tabbar v-model="mapindex" fixed>
      <mt-tab-item id="1" selected>南京市口腔医院</mt-tab-item>
      <mt-tab-item id="2">第一门诊</mt-tab-item>
      <mt-tab-item id="3">第二门诊</mt-tab-item>
      <mt-tab-item id="4">第三门诊</mt-tab-item>
      <mt-tab-item id="5">第四门诊</mt-tab-item>
      <mt-tab-item id="6">第五门诊</mt-tab-item>
    </mt-tabbar>
    <div v-if="mapindex == 1">
      <mt-cell title="地址：">南京市中央路30号</mt-cell>
      <mt-cell title="电话：">025-84683106</mt-cell>
    </div>
    <div  v-if="mapindex == 2">
      <mt-cell title="地址：">大光路139号</mt-cell>
      <mt-cell title="电话：">025-84683106</mt-cell>
    </div>
    <div  v-if="mapindex == 3">
      <mt-cell title="地址：">中山南路239号盛天大厦一楼</mt-cell>
      <mt-cell title="电话：">025-84516584</mt-cell>
    </div>
    <div  v-if="mapindex == 4">
      <mt-cell title="地址：">鼓楼区湛江路69号</mt-cell>
      <mt-cell title="电话：">025-86220179</mt-cell>
    </div>
    <div  v-if="mapindex == 5">
      <mt-cell title="地址：">迈皋桥红山路高家村43号百通公寓</mt-cell>
      <mt-cell title="电话：">025-85590350</mt-cell>
    </div>
    <div  v-if="mapindex == 6">
      <mt-cell title="地址：">建邺区庐山路98-2号</mt-cell>
      <mt-cell title="电话：">025-83620113</mt-cell>
    </div>
    <!--<div v-html="mapindex"></div>-->
    <iframe class="mapview" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
            :src="mapurl"></iframe>
  </div>
</template>

<script>
  export default {
    name: 'map',
    data () {
      return {
        mapindex: '1',
        wwidth:0,
        hheight:0,
      }
    },
    methods: {
    },
    mounted(){
      this.wwidth =  window.innerWidth;
      this.hheight =  window.innerheight - 186;
    },
    computed: {
      mapurl:{
        get:function(){
          if(this.mapindex == 1){
            return "http://api.map.baidu.com/mapCard/finish.html?location=%E6%B1%9F%E8%8B%8F%E7%9C%81%7C%E5%8D%97%E4%BA%AC%E5%B8%82%7C%7C%E5%8D%97%E4%BA%AC%E5%B8%82%E4%B8%AD%E5%A4%AE%E8%B7%AF30%E5%8F%B7&point=[118.790962,32.06767]&width="+this.wwidth+"&height="+this.hheight+"&basicInformation=false&route=true&searchBox=true&zoom=19"
          }else if(this.mapindex == 2){
            return "http://api.map.baidu.com/mapCard/finish.html?location=%E6%B1%9F%E8%8B%8F%E7%9C%81%7C%E5%8D%97%E4%BA%AC%E5%B8%82%7C%7C%E5%A4%A7%E5%85%89%E8%B7%AF139%E5%8F%B7&point=[118.809364,32.032097]&width="+this.wwidth+"&height="+this.hheight+"&basicInformation=false&route=true&searchBox=true&zoom=19"
          }else if(this.mapindex == 3){
            return "http://api.map.baidu.com/mapCard/finish.html?location=%E6%B1%9F%E8%8B%8F%E7%9C%81%7C%E5%8D%97%E4%BA%AC%E5%B8%82%7C%7C%E4%B8%AD%E5%B1%B1%E5%8D%97%E8%B7%AF239%E5%8F%B7%E7%9B%9B%E5%A4%A9%E5%A4%A7%E5%8E%A6%E4%B8%80%E6%A5%BC&point=[118.790917,32.038497]&width="+this.wwidth+"&height="+this.hheight+"&basicInformation=false&route=true&searchBox=true&zoom=19"
          }else if(this.mapindex == 4){
            return "http://api.map.baidu.com/mapCard/finish.html?location=%E6%B1%9F%E8%8B%8F%E7%9C%81%7C%E5%8D%97%E4%BA%AC%E5%B8%82%7C%7C%E9%BC%93%E6%A5%BC%E5%8C%BA%E6%B9%9B%E6%B1%9F%E8%B7%AF69%E5%8F%B7&point=[118.750082,32.053522]&width="+this.wwidth+"&height="+this.hheight+"&basicInformation=false&route=true&searchBox=true&zoom=19"
          }else if(this.mapindex == 5){
            return "http://api.map.baidu.com/mapCard/finish.html?location=%E6%B1%9F%E8%8B%8F%E7%9C%81%7C%E5%8D%97%E4%BA%AC%E5%B8%82%7C%7C%E8%BF%88%E7%9A%8B%E6%A1%A5%E7%BA%A2%E5%B1%B1%E8%B7%AF%E9%AB%98%E5%AE%B6%E6%9D%9143%E5%8F%B7&point=[118.815984,32.107689]&width="+this.wwidth+"&height="+this.hheight+"&basicInformation=false&route=true&searchBox=true&zoom=17"
          }else if(this.mapindex == 6){
            return "http://api.map.baidu.com/mapCard/finish.html?location=%E6%B1%9F%E8%8B%8F%E7%9C%81%7C%E5%8D%97%E4%BA%AC%E5%B8%82%7C%7C%E5%A4%A7%E5%85%89%E8%B7%AF139%E5%8F%B7&point=[118.809364,32.032097]&width="+this.wwidth+"&height="+this.hheight+"&basicInformation=false&route=true&searchBox=true&zoom=19"
          }
        }

      }
    }
  }
</script>

